<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ type == 1 ? '修改' : '新增' }}充电桩设备</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line" v-if="type!=1">
          <span class="lab"><i class="mark_icon">*</i>第三方设备id：</span>
          <div :class="{'error_border':tipNum===3}">
            <el-input type="text" placeholder="请输入第三方设备id" v-model.trim="dId"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>名称：</span>
          <div :class="{'error_border':tipNum===0}">
            <el-input type="text" placeholder="请输入名称" v-model.trim="dName"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>经度：</span>
          <div :class="{'error_border':tipNum===1}">
            <el-input type="number" placeholder="请输入经度" v-model.trim="lng"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>纬度：</span>
          <div :class="{'error_border':tipNum===2}">
            <el-input type="number" placeholder="请输入纬度" v-model.trim="lat"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line" v-if="type==1">
          <span class="lab">地址：</span>
          <div>
            <el-input type="text" placeholder="请输入地址" v-model.trim="address"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line" v-else>
          <span class="lab">状态：</span>
          <div>
            <el-radio-group v-model="proStatus">
              <el-radio :label="1">在线</el-radio>
              <el-radio :label="0">离线</el-radio>
            </el-radio-group>
          </div>
        </div>
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>

import {addCharge, updateCharge} from "../../../api/device";

export default {
  props: ['deviceId', 'deviceLng', 'deviceLat', 'deviceName', 'url', 'type'],
  data() {
    return {
      dName: '',
      lng: '',
      lat: '',
      infoTip: '',
      tipNum: '',
      address: '',
      loading: false,
      dId: '',
      proStatus: 1
    }
  },
  mounted() {
    this.lat = this.deviceLat ? this.deviceLat : '';
    this.lng = this.deviceLng ? this.deviceLng : '';
    this.dName = this.deviceName ? this.deviceName : '';
    this.address = this.url ? this.url : '';
    this.dId = this.deviceId ? this.deviceId : '';
  },
  methods: {
    // 确认编辑
    confirmEdit() {
      if (!this.dId && this.type != 1) {
        this.setTip(3, '请输入设备ID！')
      } else if (this.dName === '') {
        this.setTip(0, '请输入设备名称！')
      } else if (this.lng === '') {
        this.setTip(1, '请输入经度！')
      } else if (this.lat === '') {
        this.setTip(2, '请输入纬度！')
      } else {
        this.sendInfo()
      }
    },

    sendInfo() {
      let that = this;
      that.loading = true;
      let data = this.type == 1 ? {
        lng: that.lng,
        lat: that.lat,
        id: that.deviceId,
        name: that.dName,
        url: that.address
      } : {
        lng: that.lng,
        lat: that.lat,
        name: that.dName,
        isOnline: that.proStatus,
        deviceId: parseFloat(that.dId),
      }
      if (that.type == 1) {
        updateCharge(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addCharge(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setResult(finish) {
      if (finish) {
        this.closePopup(true);
        this.$message.success('操作成功！');
      }
      this.loading = false;
    },

    setTip(num, text) {
      this.tipNum = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.box_body {
  height: 300px;
}

</style>
